<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 编程语言都是用来运算数据的。
		 1、算数运算： + - * / %(模，取余)
		 在js中的算数运算：算数运算时，会将操作数自动站转换为数字类型，然后再进行算数运算。对于转换不成数字的操作数，会转换为NaN。
		 NaN  谁都不相等，和任何数据进行算数运算结构都是 NaN
		 
		2、Infinity 表示无穷大 -Infinity  
		3、0/0 --- NaN
		
		4、加法的操作数，有字符串。就不会转换数字，而知将两个操作数都转换为字符串，进行字符串拼接。
		 -->
		<form autocomplete="off">
			<input type="text" placeholder="请输入数字1">
			+
			<input type="text" placeholder="请输入数字2">
			=
			<span></span>
		</form>
		<script type="text/javascript">
			// 获取标签
			var inp1 = document.querySelectorAll("input")[0]
			var inp2 = document.querySelectorAll("input")[1]
			var span = document.querySelector("span")

			// 当在输入框1中输入时，进行运算
			inp1.oninput = function() {
				// 获取两个输入框的值：注意：获取到的数据是字符串形式
				var num1 = inp1.value
				var num2 = inp2.value
				// 判断输入框是否为空，为空设置值为0
				if (num1 == "") {
					num1 = 0
				}
				if (num2 == "") {
					num2 = 0
				}
				// 解决用户根本就不输入数字 ：判断转换之后的结果是否为NaN ，如果是就清空输入框
				// 对数据进行转换
				num1 = parseFloat(num1)
				num2 = parseFloat(num2)
				// 判断转换之后是否为NaN var a = isNaN(NaN)  // true
				if (num1 + "" == "NaN") {
					inp1.value = ""
				} else if (num2 + "" == "NaN") {
					inp2.value = ""
				} else {
					span.innerHTML = num1 + num2
				}
			}


			// 当在输入框1中输入时，进行运算
			inp2.oninput = function() {
				// 获取两个输入框的值：注意：获取到的数据是字符串形式
				var num1 = inp1.value
				var num2 = inp2.value
				// 判断输入框是否为空，为空设置值为0
				if (num1 == "") {
					num1 = 0
				}
				if (num2 == "") {
					num2 = 0
				}
				// 解决用户根本就不输入数字
				num1 = parseFloat(num1)
				num2 = parseFloat(num2)
				if (num1 + "" == "NaN") {
					inp1.value = ""
				} else if (num2 + "" == "NaN") {
					inp2.value = ""
				} else {
					span.innerHTML = num1 + num2
				}
			}
		</script>
	</body>
</html>
